
/*{
todo:[{id,text,completed}],filter:string//all/action/completed
}
*/
import React from 'react';
import ReactDOM from 'react-dom'
import { createStore } from '@reduxjs/toolkit'
import { devToolsEnhancer } from '@redux-devtools/extension';

const todoApp=(state=[],action)=>{
switch(action.type){
    case 'add':
        return[...state,{...action.payload,completed:false}]
        case'remove':
        return state.filter(item=>item.id!==action.payload)
        case'toggle':
         const todo=state.findIndex(todo=>todo.id===action.payload)
         const newTOdo={...state[todo],completed:!state[todo].completed}
         return{...state.slice(0,todo),newTOdo,...state.slice(0,todo+1)}
        default:
        return state
}
}
const store = createStore(todoApp, devToolsEnhancer())
window.store=store
class TodoApp extends React.Component{
    render(){
        return(
            <>
            <form onClick={()=>{store.dispatch({type:'add',payload:text,id:id++})}}>
                <input type='text' name='text'/>
                <button >+待办事项</button>
            </form>
            <ul>
                <li>学习事项</li>
                <li style={{textDecoration:'line-througe'}}>学习Es6</li>
            </ul>
            </>
        )
    }
}


 
ReactDOM.render(
    <TodoApp/>,document.getElementById('root')
)